<template>
  <div id="app">
    <div id="pdfDom" class="checkMan" v-if="data2">
      <h2>委托代办书</h2>
      <pre
        style="text-align: left; margin-left: 14px"
      >委托人：<span class="spanStyle">{{data2.houseapplicant}}</span></pre>
      <pre
        style="text-align: left; margin-left: 14px"
      >身份证号：<span class="spanStyle">{{data2.certificatecode}}</span></pre>
      <pre
        style="text-align: left; margin-left: 14px"
      >受托人：<span class="spanStyle">{{data2.DBRXM}}</span></pre>
      <pre
        style="text-align: left; margin-left: 14px"
      >身份证号：<span class="spanStyle">{{data2.dbrsfzh}}</span></pre>
      <pre
        style="text-align: left; margin-left: 14px"
      >兹委托受托人<span class="spanStyle">{{data2.DBRXM}}</span>为我的代理人，全权代表我办理农房审批事项。</pre>
      <pre
        style="
          text-align: right;
          margin-right: 80px;
          font-weight: 800;
          font-size: 20px;
        "
      >委托人：<span v-if="!resultImg" style="width:40px;height:10px;" @click="showPopup">点击签字</span><img v-if="resultImg" @click="showPopup" class="imgSrv" :src="resultImg" alt /></pre>
      <pre
        style="
          text-align: right;
          margin-right: 34px;
          font-weight: 800;
          font-size: 20px;
        "
      >
时间：{{ time }}</pre
      >
    </div>
    <van-cell v-show="false" @click="showPopup">点击签字</van-cell>
    <el-button size="small" class="button2" @click="showPopup" type="primary"
      >点击签字</el-button
    >
    <el-button
      size="small"
      class="button2"
      @click="handleCreateHtmlPdf"
      type="primary"
      >下一步</el-button
    >
    <van-popup closeable v-model="show" style="height: 80%; width: 80%">
      <div class="bottom">
        <vue-esign
          ref="esign"
          width="800"
          :height="1700"
          class="mySign"
          :isCrop="isCrop"
          :lineWidth="lineWidth"
          :lineColor="lineColor"
          :bgColor.sync="bgColor"
        />
        <!-- <div class="qianzi" style="color:#ddd" v-show="isShowValue">签字区域</div> -->
      </div>
      <div class="dialog-footer">
        <el-button size="mini" @click="handleReset" type="primary"
          >重签</el-button
        >
        <el-button size="mini" @click="handleGenerate" type="primary"
          >确定</el-button
        >
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      dialogVisible: false, // 弹框是否开启
      lineWidth: 6, // 画笔的线条粗细
      lineColor: "#000000", // 画笔的颜色
      bgColor: "", // 画布的背景颜色
      resultImg: "", // 最终画布生成的base64图片
      isCrop: false, // 是否裁剪，在画布设定尺寸基础上裁掉四周空白部分
      time: "",
      //   heightE: '200',
      title: "改、 扩、翻建",
      title1: "杭州市临安区青山湖街道孝村村６组孝村２５－１号",
      data1: [],
      data2: "",
      formData: [],
      isShowValue: true,
      show: false,
    };
  },
  methods: {
    // 清空画板
    handleReset() {
      this.$refs.esign.reset();
      this.isShowValue = false;
    },
    showPopup() {
      this.show = true;
      //    setTimeout(() => {
      //   this.isShowValue = false
      // }, 1500)
    },
    // 生成签字图
    handleGenerate() {
      this.$refs.esign
        .generate() // 使用生成器调用把签字的图片转换成为base64图片格式
        .then((res) => {
          this.resultImg = res;
        })
        .catch((err) => {
          // 画布没有签字时会执行这里提示一下
        });
      // 在这里向后端发请求把转换后的base64文件传给后端，后端接收以后再转换成图片做静态图片存储
      // 当然也可以把base64转成流文件blob格式的，类似上传给后端这样，具体哪种方式看后端要求
      setTimeout(() => {
        // 这里要使用定时器稍微延后以后就能取到base64数据了，当然也可以再加一个确认按钮，如：确认使用这张base64签名图片
        // 点击确认以后，在其回调函数中，再把base64的签名图片传给后端用于存储
      }, 200);
      this.show = false;
    },
    //先使用插件生成图片
    handleCreateHtmlPdf() {
      // this.handleGenerate();
      setTimeout(() => {
        if (this.resultImg == "") {
          this.$toast.fail("请签名!");
        } else {
          setTimeout(() => {
            this.getPdf("pdfDom", "委托书.png");
          }, 500);
        }
      }, 500);
    },
  },
  mounted() {
    // this.data1 = this.$route.query.data2
    this.data2 = this.$route.query.data1;
    this.formData = this.$route.query.formData;
    if (ZWJSBridge) {
      ZWJSBridge.setTitle({
        title: "签订委托书",
      })
        .then((res) => {
        })
        .catch((err) => {
        });
    }
  },
  created() {
    var date = new Date();
    this.time =
      date.getFullYear() +
      "年" +
      (date.getMonth() + 1) +
      "月" +
      date.getDate() +
      "日"; //表示当前日期
  },
};
</script>

<style lang="scss" scoped>
#app {
  height: 100vh;
  position: absolute;
  color: #000;
  .spanStyle {
    text-decoration: underline;
  }
  pre {
    white-space: pre-wrap; /*css-3*/
    white-space: -moz-pre-wrap; /*Mozilla,since1999*/
    white-space: -pre-wrap; /*Opera4-6*/
    white-space: -o-pre-wrap; /*Opera7*/
    word-wrap: break-word;
    line-height: 34px;
  }

  .checkMan {
    text-align: center;
    // border: 1px solid #e9e9e9;
    padding-top: 10px;
    h2 {
      margin-bottom: 20px;
    }
    .el-button {
      margin-bottom: 20px;
    }
    img {
      width: 18%;
      //   height: 80px;
    }
  }
  .title {
    width: 100%;
    height: 50px;
    background: #007aff;
    line-height: 50px;
    text-align: center;
    color: #ffffff;
    font-size: 20px;
    position: relative;
  }
  .imgSrv {
    margin-left: 20px;
    transform: rotate(270deg);
  }
  .button2 {
    position: relative;
    left: 38%;
    top: 30%;
    transform: translateX(-50%);
  }
  .bottom {
    position: absolute;
    // bottom: 40px;
    // .qianzi {
    //   width: 100px;
    //   position: relative;
    //   transform: rotate(90deg);
    //   font-size: 44px;
    //   // top: 124px;
    //   left: 35%;
    //   top: -50%;
    // }
    // border-top: 1px solid #000;
  }
  .dialog-footer {
    position: relative;
    left: 38px;
    top: 37%;
    transform-origin: left 50%;
    transform: rotate(90deg);
  }
}
 .el-dialog__body {
  // 设置一下签字区域的虚线边框
  .mySign {
    border: 1px dashed #000;
  }
}
</style>